<template>
    <div class="login-form-wrapper">
        <el-form ref="form" :model="form" label-width="80px" label-position="top" :rules="rules">
            <el-form-item label="账号:" prop="name" class="colorSet">
                <el-input v-model="form.name" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="pass" class="colorSet">
                <el-input type="password" v-model="form.pass" autocomplete="off" placeholder="请输入密码" @keyup.enter.native="onSubmit"></el-input>
            </el-form-item>
            <el-form-item class="login-input-button">
                <el-button type="primary" size="small" @click.prevent="onSubmit">登录</el-button>
                <el-button size="small" @click.prevent="clearEvery">清空</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    name: '',
                    region: '',
                    pass: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 3, max: 12, message: '长度在3到12个字符', trigger: 'blur'}
                    ],
                    pass: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur'}
                    ],
                }
            }
        },
        mounted() {

        },
        methods: {
            onSubmit() {
                if (this.form.name == 'daliandaxue' && this.form.pass == '12345678'){
                    this.$router.push('/index')
                }
            },
            clearEvery(){
                this.form.pass = '';
                this.form.name = ''
            }
        }
    }
</script>

<style lang="less">
    .login-form-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #eeeeee;
    }
    .colorSet .el-form-item__label{
        color: black;
    }
    .login-input-button{
        display: flex;
        justify-content: center;
    }
</style>
